import React, {useState, useEffect, useCallback, useMemo} from 'react'
import Echarts from '&/baseUI/EChartsUI'
import {Card} from 'antd'
import dayjs from 'dayjs'
import _ from 'lodash'
import {color, color1, color2} from '../colors'
import defaultOptions from "../../../NewDeviceQuery/EntData/EchartsData/options";

const EchartsData = ({data}) => {
    const [option, setOption] = useState(null)
    const [option1, setOption1] = useState(null)
    const [option2, setOption2] = useState(null)
    const [option3, setOption3] = useState(null)
    const [option4, setOption4] = useState(null)
    const {
        summation_list = [],
        production_list = [],
        indirect_list = [],
        pollution_control_list = [],
        time_list = [],
    } = data
    const times = useMemo(() => {
        return time_list.map((time) => dayjs(time).format('MM-DD HH:mm'))
    }, [time_list])
    useEffect(() => {
        if (!data) return
        const xData = data?.time_list?.map((item) => {
            return dayjs(item).format('MM-DD HH:mm')
        })
        if (data.pollution_control_list.length) {
            const legendData = data?.pollution_control_list?.map((i) => i.dev_name)
            const pollution_control_list = data?.pollution_control_list?.map(
                (item) => {
                    return {
                        type: 'line',
                        smooth: true,
                        name: item.dev_name,
                        data: item.values.map((i) => {
                            return i < 0 ? '--' : i
                        })
                    }
                }
            )
            const option = {
                tooltip: {
                    trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
                    axisPointer: {
                        //坐标轴指示器，坐标轴触发有效，
                        type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
                        crossStyle: {
                            color: '#fff'
                        }
                    }
                },
                color: color1,
                toolbox: {
                    show: true,
                    right: '0px',
                    top: '15px',
                    feature: {
                        // 下载保存为图片
                        saveAsImage: {
                            show: true,
                            // icon: `image://${echartsDown}`, // 内部相对路径
                            // connectedBackgroundColor: '#fff',
                            title: '保存图片',
                            type: 'png',
                            pixelRatio: 1
                        }
                    }
                },
                grid: {
                    bottom: '7%'
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: pollution_control_list
            }
            setOption(option)
        }
        if (data.production_list.length) {
            const legendData = data?.production_list?.map((i) => i.dev_name)
            const production_list = data?.production_list?.map((item) => {
                return {
                    type: 'line',
                    smooth: true,
                    name: item.dev_name,
                    data: item.values.map((i) => {
                        return i < 0 ? '--' : i
                    })
                }
            })
            // 从数据中获取警告区开始和结束时刻的时间字符串
            let warningStart = data['emgency_info']['start_time'] // 警告区开始时刻
            let warningEnd = data['emgency_info']['end_time'] // 警告区结束时刻
            // 将时间字符串转换为Date对象
            let startDate = new Date(warningStart)
            let endDate = new Date(warningEnd)
            // 计算两个日期之间的差异（以毫秒为单位）
            let diffMs = endDate - startDate
            // 将毫秒差异转换为分钟，并除以5得到5分钟间隔的数量
            let delay = diffMs / (1000 * 60 * 5) // 毫秒转换为分钟后再除以5
            // 在每个系列中添加 markArea 配置
            production_list.forEach((series) => {
                series.markArea = {
                    silent: false, // 标记区域会响应鼠标事件
                    itemStyle: {
                        color: 'rgb(255,164,66,0.5)' // 设置标记区域的背景颜色和透明度
                    },
                    data: [
                        // 这里作为示例，我们假设要标记第二个数据点至第四个数据点之间的区域
                        [
                            {
                                xAxis: 12, // 起始索引位置
                                yAxis: 'min' // 从 y 轴的最小值开始
                            },
                            {
                                xAxis: 12 + delay, // 结束索引位置
                                yAxis: 'max' // 到 y 轴的最大值结束
                            }
                        ]
                    ]
                }
            })

      const option1 = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: color,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: production_list
      }
      setOption1(option1)
    }
    if (data.indirect_list.length) {
      const legendData = data?.indirect_list?.map((i) => i.dev_name)
      const indirect_list = data?.indirect_list?.map((item) => {
        return {
          type: 'line',
          smooth: true,
          name: item.dev_name,
          data: item.values.map((i) => {
            return i < 0 ? '--' : i
          })
        }
      })
      // 从数据中获取警告区开始和结束时刻的时间字符串
      let warningStart = data['emgency_info']['start_time'] // 警告区开始时刻
      let warningEnd = data['emgency_info']['end_time'] // 警告区结束时刻
      // 将时间字符串转换为Date对象
      let startDate = new Date(warningStart)
      let endDate = new Date(warningEnd)
      // 计算两个日期之间的差异（以毫秒为单位）
      let diffMs = endDate - startDate
      // 将毫秒差异转换为分钟，并除以5得到5分钟间隔的数量
      let delay = diffMs / (1000 * 60 * 5) // 毫秒转换为分钟后再除以5
      // 在每个系列中添加 markArea 配置
      indirect_list.forEach((series) => {
        series.markArea = {
          silent: false, // 标记区域会响应鼠标事件
          itemStyle: {
            color: 'rgb(255,164,66,0.5)' // 设置标记区域的背景颜色和透明度
          },
          data: [
            // 这里作为示例，我们假设要标记第二个数据点至第四个数据点之间的区域
            [
              {
                xAxis: 12, // 起始索引位置
                yAxis: 'min' // 从 y 轴的最小值开始
              },
              {
                xAxis: 12 + delay, // 结束索引位置
                yAxis: 'max' // 到 y 轴的最大值结束
              }
            ]
          ]
        }
      })

      const option = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        // color: color,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: indirect_list
      }
      setOption2(option)
    }
    if (data.summation_list.length) {
      const legendData = data?.summation_list?.map((i) => i.dev_name)
      const summation_list = data?.summation_list?.map((item) => {
        return {
          type: 'line',
          smooth: true,
          name: item.dev_name,
          data: item.values.map((i) => {
            return i < 0 ? '--' : i
          })
        }
      })
      const option = {
        tooltip: {
          trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: color2,
        toolbox: {
          show: true,
          right: '0px',
          top: '15px',
          feature: {
            // 下载保存为图片
            saveAsImage: {
              show: true,
              // icon: `image://${echartsDown}`, // 内部相对路径
              // connectedBackgroundColor: '#fff',
              title: '保存图片',
              type: 'png',
              pixelRatio: 1
            }
          }
        },
        grid: {
          bottom: '7%'
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: summation_list
      }
      setOption3(option)
    }
  }, [data])

  return (
    <div className="EchartsData_modal">
      {option ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="治污设施"
        >
          <Echarts option={option} />
        </Card>
      ) : null}
      {option1 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="产污设施"
        >
          <Echarts option={option1} />
        </Card>
      ) : null}
      {option2 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="产治一体"
        >
          <Echarts option={option2} />
        </Card>
      ) : null}
      {option3 ? (
        <Card
          style={{ height: '50%' }}
          bodyStyle={{ height: 'calc(100% - 38px)' }}
          size="small"
          title="企业总电"
        >
          <Echarts option={option3} />
        </Card>
      ) : null}
      {/* {option == null && option1 == null && <div>暂无数据</div>} */}
    </div>
  )
}
export default EchartsData
